<template>
  <div class="page">
    <formRender :form="form" :columns="columns" ref="forms" />
    <el-button @click="test">测试</el-button>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, reactive, ref} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekDrawer from "@/components/business/ekDrawer/index.vue";
import demo from "@/components/form/demo.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getToken } from "@/utils/sys";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const router = useRouter();

let visiable = ref(false);
let fromtest = ref( {
  disabled: false,
  clearable: true,
  placeholder: '',
})
let form = reactive({
  input: "",
  input2: "",
  select: "",
  select2: '',
  select5: [1,0],
  switch: 1,
  switch2: "1",
  radio: "0",
  radio2: 1,
  checkbox: ['1'],
  checkbox2: ['0'],
  checkbox3: [2],
  datepicker: '',
  datepicker2: 1732809600000,
  datepicker3: '2024-10-06',
  textarea: "",
  role_id: '',
  uploadfile:JSON.stringify([
    {
        path: "files/20231012\\427fafbc58c6574e2d75912477a24550.json",
        url: "files/20231012\\427fafbc58c6574e2d75912477a24550.json",
        size: 678,
        name: "_API_MDFP_API_SYS_OPEN_BILL_DETAIL_OUT.json",
        mime: "application/json"
    },
    {
        path: "files/20231012\\c37eda803696a03cf0213abca892eb2d.js",
        url: "files/20231012\\c37eda803696a03cf0213abca892eb2d.js",
        size: 6847,
        name: "bad.js",
        mime: "text/plain"
    }
  ]),
  uploadimage: '',
  editor:'',
  treeSelect:[9,16],
  treeSelect2:''
});

let columns = ref([

  {
    type: "Input",
    column: "input",
    label: "input",
    disabled: fromtest.value.disabled == 1? true : false,
    clearable: false,
    placeholder:'',
    rules: [{ required: true, message: "Input所有参数验证", trigger: "blur" }],
  },
  {
    type: "Input",
    column: "input2",
    label: "input2",
    disabled: true,
    rules: [{ required: true, message: "请输入姓名2", trigger: "blur" }],
  },
  {
    type: "TreeSelect",
    column: "treeSelect",
    label: "treeSelect",
    autoInit: false,
    url: "/business/basis/getTree?modelCode=MODEL_DEPARTMENT",
    rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    mapping:{ // 字段映射配置
      value:'id', // 值
      label: ['department_name'], // 显示字段多个字段拼接
    },
    multiple: true, // 是否多选
    
    // 树配置
    treeConfig: {
      fieldMapping: {
        label: 'department_name',
        id: 'id',
        parentId :'parent_id'
      },
      nodeKey: 'id',
         // 选择任意级别
      checkStrictly: true, 
      // 点击节点选中
      checkOnClickNode: true,
      // 是否显示复选框
      showCheckbox: true,
      // 开启懒加载
      lazy: true
    }

  },
  {
    type: "TreeSelect",
    column: "treeSelect2",
    label: "treeSelect2",
    autoInit: true,
    url: "/business/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    mapping:{ // 字段映射配置
      value:'id', // 值
      label: ['department_name'], // 显示字段多个字段拼接
    },
    multiple: true, // 是否多选
    treeOn: false, // 开启树形结构

  },
  {
    type: "Select",
    column: "role_id",
    label: "select",
    autoInit: false,
    url: "/business/role/getList",
    rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
  },
  {
    type: "Select",
    column: "select",
    label: "select1",
    autoInit: true,
    url: "/business/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    mapping: {
      label:['label','dimension_type_code'],
      value:'dimension_code'
    }, 
    rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
  },
  {
    type: "Select",
    column: "select5",
    label: "select5",
    multiple: true,
    options:[
      {
        value: 0,
        label: '选项1',
      },
      {
        value: 1,
        label: '选项2',
      }
    ],

    rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
  },
  {
    type: "Select",
    column: "select2",
    label: "select2",
    autoInit: false,
    url: "/business/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    multiple: true
  },
  {
    type: "Switch",
    column: "switch",
    label: "switch",
    rules: [{ required: true, message: "请选择开关", trigger: "blur" }],
  },
    {
    type: "Switch",
    column: "switch2",
    label: "switch2",
    activeValue: "1",
    inactiveText:"测试",
    inactiveValue: "0",
    rules: [{ required: true, message: "请选择开关", trigger: "blur" }],
  },
  {
    type: "Radio",
    column: "radio",
    label: "radio",
    url: "/business/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "请选择单选框", trigger: "blur" }],
  },
    {
    type: "Radio",
    column: "radio2",
    label: "radio2",
    options:[{
      value: 0,
      label: '选项1'
    },
    {
      value: 1,
      label: '选项2'
    }
    ],
    rules: [{ required: true, message: "请选择单选框", trigger: "blur" }],
  },
  {
    type: "Checkbox",
    column: "checkbox",
    label: "checkbox",
    options:[{
      value: '0',
      label: '选项1'
    },
    {
      value: '1',
      label: '选项2'
    }
    ],
    rules: [{ required: true, message: "请选择复选框", trigger: "blur" }],
  },
  {
    type: "Checkbox",
    column: "checkbox2",
    label: "checkbox2",
    url: "/business/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "请选择复选框", trigger: "blur" }],
  },
  {
    type: "Checkbox",
    column: "checkbox3",
    label: "checkbox3",
    options:[{
      value: 1,
      label: '选项1'
    },
    {
      value: 2,
      label: '选项2'
    }
    ],
    rules: [{ required: true, message: "请选择复选框", trigger: "blur" }],
  },
  {
    type: "DatePicker",
    column: "datepicker",
    label: "datepicker",
    rules: [{ required: true, message: "请选择日期", trigger: "blur" }],
  },
  {
    type: "DatePicker",
    column: "datepicker2",
    label: "datepicker2",
    rules: [{ required: true, message: "请选择日期", trigger: "blur" }],
  },
  {
    type: "DatePicker",
    column: "datepicker3",
    label: "datepicker3",
    rules: [{ required: true, message: "请选择日期", trigger: "blur" }],
  },
   {
    type: "DateTimePicker",
    column: "datetimepicker",
    label: "datetimepicker",
    rules: [{ required: true, message: "请选择时间", trigger: "blur" }],
  },
  {
    type: "Textarea",
    column: "textarea",
    label: "textarea",
    maxlength: 100,
    rules: [{ required: true, message: "请输入内容", trigger: "blur" }],
  },
  {
    type: "UploadImage",
    column: "uploadimage",
    label: "Uploadimage",
    rules: [{ required: true, message: "请选择图片", trigger: "change" }],
    headers: {
      Authorization: getToken()
    }
  },
  {
    type: "UploadFile",
    column: "uploadfile",
    label: "uploadfile",
    rules: [{ required: true, message: "请选择文件", trigger: "change" }],
    headers: {
      Authorization: getToken()
    }
  },
  {
    type: "Editor",
    column: "editor",
    label: "editor",
    rules: [{ required: true, message: "请选择富文本", trigger: "change" }],
  },
  
]);
const forms = ref(null)
const test = () => {

  forms.value.validate(()=>{

  });
 
  visiable.value = true;
  console.log(forms, form,'formform');
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
</style>
